<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#candidates{
				display:none;
				border:1px solid lightgray;
				padding:0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<input type="text" id="txtSearch" onkeyup="search(event)">
		<ul id="candidates">
		</ul>
		
		<script>
			var keywords = ["c", "c++", "java", "javascript", "c#", "php", "python",
				"ada", "perl", "objective c", "swift", "visual basic"];
			var candidates = document.getElementById("candidates");
			var searchBox = document.getElementById("txtSearch");
			candidates.style.width = searchBox.clientWidth + "px";
			
			function search(event){
				var word = event.target.value.toLowerCase();
				var wordLength = word.length;
				
				var results = [];
				if(wordLength){
					results = keywords.filter(function(item){
						for(var i=0;i<wordLength;i++){
							if(word[i] != item[i]){
								return false;
							}
						}
						return true;
					});
				}
				
				clearChildNodes(candidates);
				
				results.forEach(function(item){
					var li = document.createElement("li");
					li.innerText = item;
					candidates.appendChild(li);
				});
				
				candidates.style.display = results.length ? "block" : "none";
			}
			
			function clearChildNodes(container){
				while(container.firstChild){
					container.removeChild(container.firstChild);
				}
			}
		</script>
	</body>
</html>
